//global variables that can be used by ALL the function son this page.
var inputs;
var imgClassFalse = 'imgCheckBoxNoCheck';
var imgClassTrue = 'imgCheckBoxChecked';

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
	replaceChecks();
}

function replaceChecks() {
	
	//get all the input fields on the page
	inputs = document.getElementsByTagName('input');

    var yesno = 0 ;
    
	//cycle trough the input fields
	for(var i=0; i < inputs.length; i++) {

		//check if the input is a checkbox
		if((inputs[i].getAttribute('type') == 'checkbox') || (inputs[i].getAttribute('type') == 'radio')){
			
			//create a new image
			var img = document.createElement('div');
			
			//check if the checkbox is checked
			if(inputs[i].checked)
			{
				img.className = imgClassTrue;
			}
			else
			{
				img.className = imgClassFalse;
			}

			//set image 
			//img.onclick = new Function('checkChange('+ i +')');
			
			if((inputs[i].getAttribute('type') == 'radio') && (inputs[i].getAttribute('GroupName') != ''))
			{
			    //set image ID and onclick action
			    img.id = 'checkImageAllYesNo' + i;
			    img.onclick = new Function('checkChangeAllYesNoToCheck('+ i +',' + yesno + ',' + inputs.length + ')');
			 
			    yesno = (yesno == 0) ? 1 : 0;
			}
			else if(inputs[i].getAttribute('type') == 'radio')
			{
			    //set image ID and onclick action
			    img.id = 'checkImageYesNo' + i;
			    img.onclick = new Function('checkChangeYesNo('+ i +',' + yesno + ')');
			 
			    yesno = (yesno == 0) ? 1 : 0;
			}
			else
			{
                //set image ID and onclick action
			    img.id = 'checkImage'+i;
			    img.onclick = new Function('checkChange('+ i +')');
			}
				
            //place image in front of the checkbox
			inputs[i].parentNode.insertBefore(img, inputs[i]);
			
			//hide the checkbox
			inputs[i].style.display='none';
		}
	}
}

//change the checkbox status and the replacement image
function checkChange(i) {

	if(inputs[i].checked) {
		inputs[i].checked = '';

		document.getElementById('checkImage'+i).className = imgClassFalse;
	} else {
		inputs[i].checked = 'checked';

		document.getElementById('checkImage'+i).className = imgClassTrue
	}
}

function checkChangeCheck(nb, IsChecked) {

	if(IsChecked)
	{
		inputs[nb].checked = 'checked';
		document.getElementById('checkImage'+nb).className = imgClassTrue
	}
	else
	{
		inputs[nb].checked = '';
		document.getElementById('checkImage'+nb).className = imgClassFalse;
	}
}

function checkChangeYesNo(i,yesno) {

	if(inputs[i].checked) {
	
	    inputs[i].checked = '';
		
		var ii = (yesno == 0) ? i+1 : i-1;
		
		inputs[ii].checked = 'checked';		
	
		document.getElementById('checkImageYesNo'+ i).className = imgClassFalse;
		document.getElementById('checkImageYesNo'+ ii).className = imgClassTrue;

	} else {
		inputs[i].checked = 'checked';

		var ii = (yesno == 0) ? i+1 : i-1;
		
		inputs[ii].checked = '';
		
		document.getElementById('checkImageYesNo' + i ).className = imgClassTrue
		document.getElementById('checkImageYesNo' + ii).className = imgClassFalse;

	}
}

function checkChangeAllYesNoToCheck(i, yesno, limit) {

	if(inputs[i].checked) {
		
		for(var y = 0; y < limit; y++)
		{
	        try{
	            document.getElementById('checkImageAllYesNo'+ y).className = imgClassFalse;
	            inputs[y].checked = '';
	        }catch(err){}
		}	

	} else {
		inputs[i].checked = 'checked';
		
		for(var y = 0; y < limit; y++)
		{
		    if(y == i)
		    {
		        document.getElementById('checkImageAllYesNo'+ y).className = imgClassTrue;
		    }
		    else
		    {
		        try{
		            document.getElementById('checkImageAllYesNo'+ y).className = imgClassFalse;
		            inputs[y].checked = '';
		        }catch(err){}
		    }
		}	

	}
}

window.onload = init;